<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :width="900"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    title="调整房屋"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="12">
            <a-form-item label="修改附号">
              <a-select
                v-decorator="['Number', { rules: [{ required: true, message: '请选择修改附号' }] }]"
                placeholder="请选择修改附号"
                :options="numberOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="默认面积(㎡)">
              <a-input-number
                v-decorator="['Area', { rules: [{ required: true, message: '请输入默认面积' }] }]"
                placeholder="请输入默认面积"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="默认结构">
              <a-select
                v-decorator="['Structure', { rules: [{ required: true, message: '请选择默认结构' }] }]"
                placeholder="请选择默认结构"
                :options="structureOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="默认状态">
              <a-select
                v-decorator="['Mode', { rules: [{ required: true, message: '请选择默认状态' }] }]"
                placeholder="请选择默认状态"
                :options="houseTypeOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

  <script>
import { getDropdownList, getHouseTypeColor } from '@/api/common'
import { postBatchHousesFloor, getFYDropList } from '@/api/followUpManagement'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'batchEdit' }),
      isSubmiting: false,
      spinning: false,
      houseTypeOptions: [],
      structureOptions: [],
      numberOptions: []
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      const getHouseType = getHouseTypeColor({ PmKey: 'HoueTypeColor' })
      const getStructure = getDropdownList({ PmKey: 'Structure' })
      const getNumberOptions = getFYDropList({
        lid: this.data.ID
      })
      Promise.all([getHouseType, getStructure, getNumberOptions])
        .then((res) => {
          this.houseTypeOptions = res[0].map((e) => {
            return {
              value: e.PMNAME,
              label: e.PMNAME
            }
          })
          this.structureOptions = res[1].map((e) => {
            return {
              value: e.DROPKEY,
              label: e.DROPVALUE
            }
          })
          this.numberOptions = res[2].map(e => {
            return {
              value: e.ID,
              label: e.name
            }
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const houseresources = Object.assign(values, { LID: this.data.ID })
          this.isSubmiting = true
          postBatchHousesFloor({
            State: 'update',
            houseresources
          })
            .then((res) => {
              this.$message.success('批量调整房源成功！')
              this.close()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
  <style lang="less" scoped>
/deep/ .ant-form-item-label {
  white-space: normal;
  padding-right: 12px;
}
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
